VUE 的一些常用外部組件學習日志
發(fā)布時間:2024/9/5 15:52:50
echarts 采用畫圖
Vue.js(讀音 /vjuː/, 類似于 view) 是一套構(gòu)建用戶界面的漸進式框架。
Vue 只關(guān)注視圖層, 采用自底向上增量開發(fā)的設計。
Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學習起來非常簡單,本教程基于 Vue 2.1.8 版本測試,Vue3 請參閱 Vue3 教程。
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<template v-if="ok">
<h1>菜鳥教程</h1>
<p>學的不僅是技術(shù),更是夢想!</p>
<p>哈哈哈,打字辛苦。。!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
GoJS 圖形實例
GoJS是一個用于創(chuàng)建交互式可視化圖表和圖形的JavaScript庫。它提供了豐富的功能和工具,使開發(fā)人員能夠輕松地構(gòu)建各種類型的圖表,包括流程圖、組織結(jié)構(gòu)圖、網(wǎng)絡拓撲圖等。GoJS具有靈活的布局和樣式設置,可以通過簡單的API來實現(xiàn)圖表的創(chuàng)建和操作。
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應用。
vue的單頁面應用是基于路由和組件的,路由用于設定訪問路徑
router.map({
'/home': { component: Home },
'/about': { component: About }
})
SweetAlert2是一款功能強大的純Js模態(tài)消息對話框插件。SweetAlert2用于替代瀏覽器默認的彈出對話框,它提供各種參數(shù)和方法,支持嵌入圖片,背景,HTML標簽等,SweetAlert2是SweetAlert-js的升級版本,它解決了SweetAlert-js中不能嵌入HTML標簽的問題,并對彈出對話框進行了優(yōu)化,同時提供對各種表單元素的支持,還增加了5種情景模式的模態(tài)對話框,功能非常強大
Swal('hello world')
swal({
title: '提示',
text: "早上好",
confirmButtonText: '確認',
confirmButtonColor: 'Green',
})
swal({
title: '確定?',
text: '您將無法恢復此文件!',
type: '警告',
showCancelButton: true,
confirmButtonText: '確定,刪除',
cancelButtonText: '取消',
}).then(function(isConfirm) {
if (isConfirm.value) {
swal(
'已刪除!',
'文件已刪除',
'success'
);
}
});